{extend name="template/base" /}
{block name="nav"}{/block}
{block name="content"}

{/block}
{block name="script"}

		<link href="css/jquery-ui-1.8.custom.css" rel="Stylesheet" type="text/css" />  
		<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.js" ></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script> 
		<script type="text/javascript" src="js/jquery.cropzoom.js"></script> 

		<script type="text/javascript" src="//cdn.bootcss.com/cropper/3.0.0-alpha.1/cropper.js" ></script>
		<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/cropper/3.0.0-alpha.1/cropper.css"/>
		<script src="//cdn.bootcss.com/vue/2.2.1/vue.js"></script>
		<script src="//cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>


<form action="{:url('updatethumb')}" method="post" enctype="multipart/form-data">
	
	
	
	<!--<img  name="pic" src="{$data.pic}"   style="display: block;margin-left: 25%;margin-top:8%;">
			
	<button class="btn btn-danger radius" type="submit" style="text-align: center;margin-left: 40%;margin-top:10px;">开始裁剪</button>	
	<a  href="{:url('index')}"  class="btn btn-success radius"  style="margin-top:10px ;">取消</a>	-->
			<input hidden="hidden" name="id" value="{$data.id}">	
			<input type="hidden" id="phone"  value="" name="phone"/>
			
			<div class="App" id="App">
			
				<div style="width: 1000px;float: left;" >
				  <img id="image" src="{$data.pic}">			
				</div>	
				
				<div style="float: left;margin-left: 10px;">
					<img  src="" id="img02" name="pic"/>
				<div/>
				
		
				<br/>
				
				<div>	  
					 <span style="margin-left: 100px;" class="btn btn-default">宽：{{width}}</span>
					<span style="margin-left: 10px;" class="btn btn-default">高：{{height}}</span>
				</div>
				<br/>
				<input type="button" name="" id="btn" value="查看" style="margin-left: 100px;" class="btn btn-success radius"/>
				
				<input type="submit" value="保存" class="btn btn-success radius"style="margin-left: 30px;">
				<a href="{:url('index')}"  style="margin-left: 100px;" class="btn btn-success radius"/>返回</a>
				<br/><br/>
			
			</div>
		<script type="text/javascript">
				
				$(function(){
					var VueApp  = new Vue({
						el:"#App",
						data:{
							width:'',
							height:''
						}
					})
					var App  = $('#image').cropper({
					  	aspectRatio: 96/53,					
				 	 	crop: function(e) {						
					  }				 				 	 	
					});
					$("#btn").on("click",function(){
						var imgData = App.cropper("getCroppedCanvas").toDataURL();
						$("#img02").attr("src",imgData);
						$("#phone").attr("value",imgData);
						VueApp.width = _.round(App.cropper("getCropBoxData").width) ;
						VueApp.height = _.round(App.cropper("getCropBoxData").height);
					})
				})
				
			</script>
	
	
	
	
</form>

{/block}